<template>
  <!-- <transition
    mode="out-in"
    enter-active-class="animated fadeInLeft"
    leave-active-class="animated fadeOutLeft"
  >-->
  <div class="sidebar" @click.self="controlSB">
    <div class="container">
      <button>登录</button>
      <button>注册</button>
    </div>
  </div>
  <!-- </transition> -->
</template>


<script>
export default {
  name: "sidebar",
  data() {
    return {};
  },
  methods: {
    //关闭侧边栏
    controlSB() {
      if (this.$store.state.opensideBar == true) {
        let sbstate = false;
        this.$store.commit("openSideBar", sbstate);
      }
    }
  }
};
</script>

<style lang='scss'>
$fontcolor: #333;
.sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 12;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  background: rgba(30, 30, 30, 0.9);
  .container {
    width: 75%;
    height: 100%;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: rgba(255, 255, 255, 0.7);
    button {
      border-radius: 5px;
      margin: 20px;
      width: 80%;
      background-color: #fff;
      color: $fontcolor;
      line-height: 40px;
    }
  }
}
</style>